ブロックの背景をグラデーションにする
今回は、DIVタグでブロック化された範囲の背景をグラデーションにする方法を紹介します。Internet Explorerにはグラデーション専用のフィルタが用意されているので、手軽に指定することが可能です。そのほか、Netscapeなどのブラウザでも同様の結果を得る方法も紹介します。

→ filter:progid:DXImageTransform.Microsoft.gradient()を使用する
 
Internet Explorer 5.5以降には、「filter:progid:DXImageTransform.Microsoft.gradient()」というフィルタが用意されており、これをスタイルシートに記述するだけで背景をグラデーションにできます。フィルタのカッコ内には、グラデーションの開始色(startcolorstr)と終了色(endcolorstr)をRGBの16進数で指定します。また、グラデーションの方向を「gradienttype」で指定することも可能です。「gradienttype=0」で縦方向のグラデーション、「gradienttype=1」で横方向のグラデーションを指定できます。
<DIV align="center"
     style="width:350; height:310;
          filter:progid:DXImageTransform.Microsoft.gradient
           (startcolorstr=#55CC55,endcolorstr=#000000,gradienttype=0)">

     ・
     ・
   (文字や画像など)
     ・
     ・

</DIV>


→ IE以外のブラウザでもグラデーションを実現する
 
「filter:progid:DXImageTransform.Microsoft.gradient()」は、Internet Explorer 5.5以降専用のフィルタとなるため、旧バージョンのInternet ExplorerやNetscapeでは、背景をグラデーション表示できません。多くのブラウザで背景をグラデーションにするには「background-image:url()」のスタイルシートを使用し、「DIV」タグの背景に画像を指定します。

背景とする画像は、画像編集ソフトでグラデーションの背景画像を作成します。次に、「background-image:url()」のカッコ内に背景画像のファイル名を指定します。なお、この方法を利用する場合は、背景画像のサイズに注意する必要があります。「DIV」タグのサイズよりも画像のサイズが小さい場合は、縦横に画像が繰り返して配置されます。このため、背景画像は「DIV」タグと同じサイズで作成する必要があります。
<DIV align="center"
     style="width:350; height:310; background-image:url('grback.jpg')">

     ・
     ・
   (文字や画像など)
     ・
     ・

</DIV>


e[NECir Yahoo yV LINEf[^[z500~`I
z[y[W NWbgJ[h COiq@COsI COze